<style lang=sass>
@import "../../assets/sass/switch/switch.scss";
</style>

<template>
<div class="vue-switch" v-bind:class="checkedCls" @click="onChanged">
	<div class="vue-switch-inner">
		<span class="vue-switch-btn">{{text}}</span>
	</div>
</div>
</template>

<script>
export default{
	props:{
		checkedText:String,
		unCheckedText:String,
		text:String,
		checked:String
	},
	data(){
		return {
			checkedCls:"",
		}
	},
	compiled(){
		if(this.checked=="checked"){
			this.checkedCls="vue-switch-checked";
			this.text=this.checkedText;
		}else{
			this.checked="";
			this.text=this.unCheckedText;
		}
	},
	watch:{
		checked(value){
			//console.log(value)
			if(value=="checked"){
				this.checkedCls="vue-switch-checked";
				this.text=this.checkedText;
			}else{
				this.checkedCls="";
				this.text=this.unCheckedText;
			}
		}
	},
	methods:{
		onChanged(){
			if(this.checked==""){
				this.checked="checked";
			}else{
				this.checked="";
			}
			this.$emit("changed",this.checked);
		}
	}
}
</script>